<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        #ul1{
            width: 1000px;
            margin: 100px auto;
            list-style: none;
        }
        #ul1 li{
            float: left;
            width: 260px;


        }
        #ul1 li div{
            border: 1px solid #333333;
        }
        #ul1 li div {
            width: 250px;
            display: block;
            margin-bottom: 10px;
        }
        #ul1 li div img{
            width: 250px;
            display: block;
        }
    </style>
</head>
<body>
    <ul id="ul1">
         <li>

         </li>
        <li>

        </li>
        <li>

        </li>


    </ul>
<script src="jquery-1.11.2.min.js"></script>
<script>
    /*
    * 1. clientHeight 内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度
    *2.offsetHeight IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
    * NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
    *
    *
    * */
    //图片没加载之前数据是不能被添加进来的,可以使得后端传递一个高度过来可以解决
        window.onload=function () {
             var oUl=document.getElementById("ul1");
                var aLi=oUl.getElementsByTagName("li");//获取li
                var iLen=aLi.length;
                var iPage=1;
                var b=true;
                //初始化
            function  getList(){
                $.getJSON("demo.json", function(data) {
                    var data=data.results;
                    if(!data.length){
                        //没有数据了
                          return;
                    }
                    for(var i=0;i<data.length;i++){
                        console.info(data[i].picUrl);
                        //获取高度最短的li,往最短的li中添加
                        var _index=getShort();
                        var oDiv=document.createElement("div");
                        var oImg =document.createElement("img");
                        //添加img的src
                        oImg.src=data[i].picUrl;
                        oImg.style.width='225px';
                        oImg.style.height=data[i].height*(225/data[i].width)+'px';
                        console.info(  oImg.style.height);
                        oDiv.appendChild(oImg);
                        var oP=document.createElement("p");
                        //添加p的内容
                        oP.innerHTML=data[i].name;
                        oDiv.appendChild(oP);
                        aLi[_index].appendChild(oDiv);
                    }
                    b=true;
                })
            }



            window.onscroll=function () {

                var _index=getShort();//最短的一列是否进入了可视区
                var oLi=aLi[_index];//

                var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; //滚动条纵向滚动的距离
                if(getTop(oLi)+oLi.offsetHeight<document.documentElement.clientHeight+scrollTop){
                    if(b){
                        b=false;
                        iPage++;
                        //滚动加载会联序的，在数据在没加载之后我们会加很多页
                        //我们应该满足条件一次只加载一次不需要都加载，我们要等上一批加载完之后再去加载
                        getList();
                    }


                }
            }

            //得到当前数据的最短
            function getShort(){
                var index=0;
                var ih=aLi[index].offsetHeight;
                for(var i=1;i<iLen;i++){
                    if(aLi[i].offsetHeight<ih){
                        index=i;
                        ih=aLi[i].offsetHeight;
                    }
                }
                return index;

            }
            //获取最短LI的top值
            function  getTop(obj) {
                var iTop=0;
                while(obj){
                    iTop+=obj.offsetTop;//offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
                    obj=obj.offsetParent;
                }
                return iTop
            }






        }


</script>

</body>
</html>